<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-body">
        <div class="wrap-container">
          <div class="chartsdom" id="chart_ptrend"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getalarmData } from '@/api/echarts'
// import * as echarts from 'echarts';
// import 'echarts-gl';
// import 'echarts-liquidfill';
export default {
  name: "pyramidTrend",
  data() {
    return {
      option: null,
      dataMap: {},
      alarmEquipmentNumber: [],  // 存储从接口获取的数据
      faultNumbers: [],
      offlineNumbers: [],
      months: []  // 存储从接口获取的月份数据
    }
  },
  mounted() {
    // 等待数据获取完毕后再调用 getEchart
  },
  created() {
    getalarmData().then(res => {
      console.log(res, '设备数');
      this.alarmEquipmentNumber = res.msg.map(item => item.alarmEquipmentNumber);
      this.faultEquipmentNumbers = res.msg.map(item => item.faultEquipmentNumber);
      this.offlineEquipmentNumbers = res.msg.map(item => item.offlineEquipmentNumber);
      this.months = res.msg.map(item => `${item.month}月份`);

      // 数据获取完毕后初始化图表
      this.getEchart();
    });
  },
  methods: {
    dataFormatter(obj) {
      // 定义城市名称列表
      let pList = ['数值报警设备数量', '故障报警设备数量', '离线报警设备数量'];
      let temp;

      // 外层循环，遍历 obj 的前三个属性值
      for (let x = 0; x < 3; x++) {
        let max = 0;
        let sum = 0;
        // 获取当前属性值数组
        temp = obj[x];
        // 内层循环，遍历当前数组的每个元素
        for (let i = 0, l = temp.length; i < l; i++) {
          // 计算当前数组的最大值
          max = Math.max(max, temp[i]);
          // 计算当前数组的总和
          sum += temp[i];

          // 将数组中的每个数字替换为包含城市名和该数字的对象
          obj[x][i] = {
            name: pList[x],
            value: temp[i]
          };
        }

        // 将最大值（取整到最接近的100的倍数）附加到 obj 对象中
        obj[x + 'max'] = Math.floor(max / 100) * 100;
        // 将总和附加到 obj 对象中
        obj[x + 'sum'] = sum;
      }

      // 返回修改后的对象
      return obj;
    },

    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_ptrend'));
      let itemStyle = {
        barBorderRadius: [15, 0],
        color: '#ffe000'
      }

      // 将每个数组中的第一个、第二个和第三个值分别赋值到dataMap
      this.dataMap.dataType = this.dataFormatter({
        2: [
          this.offlineEquipmentNumbers[0],
          this.faultEquipmentNumbers[0],
          this.alarmEquipmentNumber[0]
        ],
        1: [
          this.offlineEquipmentNumbers[1],
          this.faultEquipmentNumbers[1],
          this.alarmEquipmentNumber[1]
        ],
        0: [
          this.offlineEquipmentNumbers[2],
          this.faultEquipmentNumbers[2],
          this.alarmEquipmentNumber[2]
        ],
      });

      this.option = {
        baseOption: {
          timeline: {
            axisType: 'category',
            autoPlay: true,
            playInterval: 2000,
            data: this.months,  // 使用从接口获取的月份数据
            left: 80,
            right: 80,
            bottom: 10,
            lineStyle: {
              color: '#179bf1'
            },
            label: {
              color: '#fff'
            },
            checkpointStyle: {
              color: '#01d8ff',
              symbolSize: 10,
              borderColor: 'rgba(1, 216, 255, 0.5)',
              borderWidth: 5,
            },
            controlStyle: {
              show: false,
            },
            itemStyle: {
              borderColor: '#004b85',
              borderWidth: 1,
              shadowColor: 'rgba(1, 216, 225, 0.5)',
              shadowBlur: 5
            },
            emphasis: {
              label: {
                color: '#01d8ff',
                show: false
              },
              checkpointStyle: {
                color: '#01d8ff',
                borderColor: 'rgba(1, 216, 255, 0.5)',
                borderWidth: 5,
              },
              itemStyle: {
                color: '#01d8ff',
                borderColor: 'rgba(1, 216, 225, 0.5)',
                borderWidth: 5
              }
            }
          },
          calculable: true,
          grid: {
            top: '10%',
            bottom: '25%'
          },
          xAxis: [{
            type: 'category',
            axisLabel: {
              interval: 0
            },
            data: ['数值报警设备数量', '故障报警设备数量', '离线报警设备数量'],
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ffffff',
              }
            },
          }],
          yAxis: [{
            type: 'value',
            name: '个',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ffffff'
              }
            }
          }],
          series: [{
            name: '一类',
            type: 'bar',
            barWidth: 30,
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              color: '#fff'
            },
          }]
        },
        options: [{
          series: [{
            data: this.dataMap.dataType['0'],
            itemStyle: itemStyle
          }]
        }, {
          series: [{
            data: this.dataMap.dataType['1'],
            itemStyle: itemStyle
          }]
        }, {
          series: [{
            data: this.dataMap.dataType['2'],
            itemStyle: itemStyle
          }]
        }]
      }

      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getEchart);
  }
};
</script>



<style lang="scss" scoped>
.sn-container {
  transform: scale(0.9);
  // left: -1vw;
  bottom: -2vh;
  // top: 1548px;
  // width: 28vw;
  // height: 45vh;
  height: 115%;

  .chartsdom {
    width: 100%;
    height: 105%;
  }
}
</style>
